<template>
  <div class="acManageNav">
    <div class="admin">欢迎，admin</div>
    <div id="banner">
      <div class="select">
        <div class="a" @click="getData1" :class="{ a: isA1, aa: isA2 }">
          家庭
        </div>
        <div class="b" @click="getData2" :class="{ b: isB1, bb: isB2 }">
          学校
        </div>
        <div class="c" @click="getData3" :class="{ c: isC1, cc: isC2 }">
          社区
        </div>
      </div>
      <img src="@/assets/折叠收起.png" @click="fold" />
    </div>
    <img id="img" src="@/assets/折叠收起.png" @click="fold" />
  </div>
  <div class="acManageTable">
    <table>
      <thead>
        <tr>
          <th>活动名称</th>
          <th>活动地区</th>
          <th>活动支出</th>
          <th>活动收入</th>
          <th>活动时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.acId">
          <!--js中的数组渲染到页面，v-for循环，data[0].会报错-->
          <td>{{ item.acName }}</td>
          <td>{{ item.region }}</td>
          <td>{{ item.pay }}</td>
          <td>{{ item.income }}</td>
          <td>{{ item.createTime }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHidden: true,
      activity: [],
      isA1: true,
      isA2: false,
      isB1: true,
      isB2: false,
      isC1: true,
      isC2: false,
      data: []
    }
  },
  mounted() {
    this.getData1()
  },
  components: {},
  methods: {
    fold() {
      console.log(this.isHidden)
      if (this.isHidden) {
        document.getElementById('banner').style.display = 'none'
        // id名不用加#，引号里面的是id名称！
        document.getElementById('img').style.display = 'block'
      } else {
        document.getElementById('banner').style.display = 'block'
        document.getElementById('img').style.display = 'none'
      }
      this.isHidden = !this.isHidden
    },
    async getData1() {
      this.isA1 = !this.isA1
      this.isA2 = !this.isA2
      this.isB1 = true
      this.isB2 = false
      this.isC1 = true
      this.isC2 = false
      var j = 0
      const { data: ret } = await this.$http.get(
        'infoservice/activity/queryAll'
      )
      this.activity = ret.data.list
      console.log(this.activity[0].type)
      for (var i = 0; i < this.activity.length; i++) {
        if (this.activity[i].type == 0) this.data[j++] = this.activity[i]
      }
      console.log(this.data[0])
    },
    async getData2() {
      this.isB1 = !this.isB1
      this.isB2 = !this.isB2
      this.isA1 = true
      this.isA2 = false
      this.isC1 = true
      this.isC2 = false
      let j = 0
      const { data: ret } = await this.$http.get(
        'infoservice/activity/queryAll'
      )
      this.activity = ret.data.list
      console.log(this.activity[0].type)
      for (var i = 0; i < this.activity.length; i++) {
        if (this.activity[i].type == 1) this.data[j++] = this.activity[i]
      }
    },
    async getData3() {
      this.isC1 = !this.isC1
      this.isC2 = !this.isC2
      this.isB1 = true
      this.isB2 = false
      this.isA1 = true
      this.isA2 = false
      let j = 0
      const { data: ret } = await this.$http.get(
        'infoservice/activity/queryAll'
      )
      this.activity = ret.data.list
      console.log(this.activity[0].type)
      for (var i = 0; i < this.activity.length; i++) {
        if (this.activity[i].type == 2) this.data[j++] = this.activity[i]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.acManageNav {
  width: 3.25rem;
  height: 6.25rem;
  //background-color: aqua;
  margin-top: 1.25rem;
  img {
    position: absolute;
    top: 4.5rem;
    left: 3.875rem;
    width: 20px;
  }
  #img {
    position: absolute;
    top: 4.5rem;
    left: 0;
    width: 0.25rem;
    display: none;
  }
}
.admin {
  background-color: rgb(137, 9, 9);
  width: 2.5rem;
  height: 0.625rem;
  line-height: 0.625rem;
  text-align: center;
  border-radius: 0.1875rem;
  color: rgb(252, 187, 0);
  font-family: '华文行楷';
  margin-left: 0.4375rem;
}
#banner {
  width: 120%;
  height: 5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  margin-top: 0.375rem;
  border-style: solid;
  border-left-style: none;
  border-width: 0.5px;
  border-color: #ff000e;
  display: block;
  .select {
    // 同一个盒子，display又是block，又是flex的话会以block为准，flex失效
    width: 100%;
    height: 100%; // 80%的话banner不能使用完全
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  //background-color: aqua;
}
.a,
.b,
.c {
  background-color: rgb(137, 9, 9);
  width: 3.125rem;
  height: 1rem;
  line-height: 1rem;
  border-radius: 0.1875rem;
  color: rgb(255, 255, 255);
  font-family: monospace;
  font-weight: 800;
  text-indent: 1.6875rem;
  background-size: 0.625rem 0.625rem;
  background-repeat: no-repeat; // 如果不加这句，背景图片重复，图片宽小于框宽
  background-position: 0.875rem 0.1875rem;
  // 图像的左上角距离元素左边向右偏移多少，距离上边向下偏移多少
}
.a {
  background-image: url('@/assets/家庭.png');
}
.b {
  background-image: url('@/assets/学校.png');
}
.c {
  background-image: url('@/assets/社区.png');
}
.a:hover,
.aa {
  // .a:focus只在<a href=''></a>才有效
  background-color: rgb(225, 80, 55);
  background-image: url('@/assets/家庭1.0.png');
}
.b:hover,
.bb {
  background-color: rgb(225, 80, 55);
  background-image: url('@/assets/学校1.0.png');
}
.c:hover,
.cc {
  background-color: rgb(225, 80, 55);
  background-image: url('@/assets/社区1.0.png');
}
.acManageTable {
  width: 15.4625rem;
  height: 8.525rem;
  background-color: aqua;
  position: absolute;
  right: 0.375rem;
  top: 0.625rem;
  table {
    margin-left: 10%;
    width: 80%;
    thead {
      background: rgb(193, 29, 46);
      color: rgb(220, 236, 246);
    }
    tbody {
      text-align: center;
      tr:nth-child(even) {
        // tr:nth-child跟:hover一样，冒号附件不能有空格！！
        background: rgba(193, 105, 110);
        color: #000;
      }
      tr:nth-child(odd) {
        background: rgba(249, 250, 252);
        color: #000;
      }
    }
  }
}
</style>
